<script src="https://www.layuicdn.com/layui/layui.js"></script>
<!-- ugc / 全屏背景 start-->
<!-- 在此处插入页面内容 -->
<div>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>




	<!-- bootstrap / 卡片 start-->
	<!-- 文档地址 https://getbootstrap.net/docs/components/card/ -->
	<div class="card" style="width: 18rem;margin: 10px auto;font-size: 14px">
		<!-- 设置图片或头像 -->
		<img class="card-img-top" src="http://blog.diyxi.top:60/img/bookimg/4.jpg" alt="Card image cap">
		<div class="card-body">
			<!-- 标题 -->
			<h5 class="card-title">Card title</h5>
			<!-- 内容 -->
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
				content.</p>
			<!-- 按钮 -->
			<a href="#" class="btn btn-primary">Go somewhere</a>
			<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />


		</div>


		<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />


		<!-- layui / 折叠面板 start-->
		<!-- 框架的组件文档 "https://www.layui.com/doc/element/panel.html" -->
		<div class="layui-collapse" lay-accordion style="font-size: 14px">
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">杜甫</h2>
				<div class="layui-colla-content layui-show">
					杜甫是个好同志。
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">李清照</h2>
				<div class="layui-colla-content ">

					内容区域
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">鲁迅</h2>
				<div class="layui-colla-content ">

					内容区域
				</div>
			</div>
		</div>

		<script type="text/javascript">
        
			//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
		//每一项点击事件监听
		$('.layui-colla-title').click(function(){
			console.log($(this).text());
		})
		</script>
		<!-- layui / 折叠面板 end-->


		<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />



		<!-- layui / 倒计时 start-->
		<!-- 框架的倒计时组件文档 "https://www.layui.com/doc/modules/util.html#countdown" -->
		<div id="test"
			style="background-color: #999;color:#fff;font-size: 14px;line-height: 40px;height: 40px;text-align: center;">
		</div>

		<script type="text/javascript">
          //配置layui的目录路径，否则无法加载相应的模块 
            layui.config({
                dir: 'https://www.layuicdn.com/layui-v2.5.6/' //layui.js 所在路径（注意，如果是 script 单独引入 layui.js，无需设定该参数。），一般情况下可以无视
                ,version: false //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值，如：201610
                ,debug: false //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面
                ,base: '' //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
            });
		layui.use('util', function(){
		  var util = layui.util;
		  
		  //示例
		  var endTime = new Date(2020,9-1,0).getTime() //假设为结束日期
		  ,serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
		  util.countdown(endTime, serverTime, function(date, serverTime, timer){
		    var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
		    layui.$('#test').html('离爆炸还有  '
		    	+ str+'');
		  });
		});    
		</script>
		<!-- layui / 倒计时 end-->


	</div>

	<script type="text/javascript">
		//获取按钮组件
		var cardbtn=$('.card-body .btn');
		cardbtn.click(function(){
			//dosomething
			console.log($(this).html());
		})
	</script>
	<!-- bootstrap / 卡片 end-->

</div>

<script type="text/javascript">
	$('body').css({
			'background-image': 'url(http://blog.diyxi.top:60/img/bookimg/4.jpg)',
			'background-size': '100% 100%',
			'background-repeat': 'no-repeat',
			'background-attachment': 'fixed'
		})
</script>
<!-- ugc / 全屏背景 end-->